import { useEffect, useMemo, useState } from 'react';
import { Modal, Row, Col, Checkbox, Typography, Button, Space } from 'antd';
import { FaXmark } from 'react-icons/fa6';
import type { ModalProps } from 'antd';
import Empty from 'src/components/Empty';

const { Link } = Typography;
interface IColumnsItem {
  label: string;
  value: string;
}

export interface IProps extends ModalProps {
  columns: IColumnsItem[];
  onSaveColumns?: (value: string[]) => void;
}

export default function CustomColumnsModal(props: IProps) {
  const { columns, onSaveColumns, onCancel, ...rest } = props;
  const [selectedList, setSelectedList] = useState<string[]>([]);

  const onChange = (values: string[]) => {
    setSelectedList(values);
  };

  const checkboxList = useMemo(() => {
    const result = [] as IColumnsItem[];

    columns.forEach((item) => {
      if (selectedList.includes(item.value)) {
        result.push(item);
      }
    });
    return result;
  }, [selectedList, columns]);

  useEffect(() => {
    setSelectedList(columns.map((item) => item.value));
  }, [columns]);

  return (
    <Modal {...rest} title="自定义配置" onCancel={onCancel} width={800} footer={null}>
      <>
        <Row gutter={24} className="h-[300px]">
          <Col span={16}>
            <div className="border border-neutral-200 dark:border-neutral-600 border-solid h-[100%]">
              <div className="bg-neutral-50 dark:bg-neutral-800 px-[12px] py-[8px] font-semibold">
                全部列
              </div>
              <div
                className="px-[12px] py-[8px] overflow-y-auto overflow-x-hidden"
                style={{ height: 'calc(100% - 38px)' }}>
                <Row gutter={0}>
                  <Checkbox.Group
                    value={selectedList}
                    className="!gap-x-0 gap-y-[4px]"
                    onChange={(value) => onChange(value as string[])}>
                    {columns.map((item) => {
                      return (
                        <Col span={8} key={item.value}>
                          <Checkbox className="min-w-[156px]" value={item.value}>
                            {item.label}
                          </Checkbox>
                        </Col>
                      );
                    })}
                  </Checkbox.Group>
                </Row>
              </div>
            </div>
          </Col>
          <Col span={8}>
            <div className="border border-neutral-200 border-solid dark:border-neutral-600 h-[300px]">
              <div className="bg-neutral-50 dark:bg-neutral-800 px-[12px] py-[8px] flex justify-between">
                <div className="font-semibold">
                  选中列 {checkboxList.length > 0 ? `（${checkboxList.length}）` : ''}
                </div>
                <Link disabled={selectedList.length === 0} onClick={() => onChange([])}>
                  清空
                </Link>
              </div>
              <div
                className="px-[12px] py-[8px] overflow-y-auto overflow-x-hidden"
                style={{ height: 'calc(100% - 38px)' }}>
                {checkboxList.length === 0 ? (
                  <Empty iconStyle={{ width: 200, height: 200 }} />
                ) : (
                  checkboxList.map((item) => {
                    return (
                      <div
                        key={item.value}
                        className="bg-neutral-100 dark:bg-neutral-600 rounded-md relative mb-[6px]">
                        <div className="pr-[24px] px-[8px] py-[4px]">{item.label}</div>
                        <FaXmark
                          onClick={() =>
                            onChange(selectedList.filter((value) => value !== item.value))
                          }
                          className="absolute top-[7px] right-[5px] text-base cursor-pointer"
                        />
                      </div>
                    );
                  })
                )}
              </div>
            </div>
          </Col>
        </Row>
        <div className="flex justify-end w-[100%] mt-[10px]">
          <Space>
            <Button onClick={onCancel}>取消</Button>
            <Button onClick={() => onSaveColumns && onSaveColumns(selectedList)} type="primary">
              保存
            </Button>
          </Space>
        </div>
      </>
    </Modal>
  );
}
